<template>
    <div class="property_container">
        <Drawer
                :width="400"
                title="交流断路器属性设置"
                :closable="false"
                v-model="showPropertyAcBreaker"
                @on-visible-change="propertyChangeHandler"
        >
            <Form :model="formItem" :label-width="90">
                <FormItem label="元件名称">
                    <Input v-model="formItem.key" readonly></Input>
                </FormItem>
                <FormItem label="参考电压">
                    <Input v-model="formItem.v"></Input>
                </FormItem>
                <FormItem label="参考电流">
                    <Input v-model="formItem.i"></Input>
                </FormItem>
                <FormItem label="参考开关">
                    <i-switch v-model="formItem.switch" size="large">
                        <span slot="open">开启</span>
                        <span slot="close">关闭</span>
                    </i-switch>
                </FormItem>
                <FormItem label="参考值">
                    <Slider v-model="formItem.slider"
                            :step="10"></Slider>
                </FormItem>
                <FormItem label="备注">
                    <Input v-model="formItem.remarks" type="textarea" :autosize="{minRows: 2,maxRows: 5}"
                           placeholder="请填写备注..."></Input>
                </FormItem>
            </Form>

        </Drawer>
    </div>

</template>
<script>
  import {Button, Drawer, Form, Input, Footer, Slider} from 'view-design';
  import {mapState} from 'vuex';

  export default {
    name: "IndexPropertyAcBreaker",
    components: {
      Button,
      Drawer,
      Form,
      Input,
      Footer,
      Slider,
    },
    data() {
      return {
        formItem: {
          key: '',
          v: '',
          i: '',
          checkbox: [],
          switch: true,
          slider: 50,
          remarks: ''
        }
      }
    },
    computed: {
      ...mapState([
        'showPropertyAcBreaker',
      ])
    },
    methods: {
      propertyChangeHandler(status) {
        if (status) {
          // 开启
          const {selectedNodeKey, selectedUUID, nodeProperty} = this.$store.state;
          console.log(nodeProperty[selectedUUID][selectedNodeKey])
          this.formItem = nodeProperty[selectedUUID][selectedNodeKey];

        } else {
          // 关闭
          this.$store.commit('closeProperty', this.formItem)
        }
      }
    }
  }
</script>

<style>
    .property_container {
        min-width: 300px;
        min-height: 300px;
    }
</style>
